<template>
<div>
  <Header :title=title><i class="el-icon-arrow-left" @click="$global.goPage('/mine')"></i> </Header>
  <el-card v-for="(item,id) in MyCom" :key="id">
    <el-popover placement="bottom-start" width="100" trigger="hover">
<div class="userinfo" style="margin: 0">
  <h3 v-if="item.gender">性别：{{item.gender==1?'男':'女'}}</h3>
  <h3 v-if="item.userLevel">用户等级：{{item.userLevel}}</h3>
  <h3 v-if="item.cityName">所在城市：{{item.cityName}}</h3>
</div>
    <el-avatar :size="50" :src="item.avatarUrl" slot="reference"></el-avatar></el-popover>
    <div class="userinfo">
      <h3>{{item.nickName}}</h3>
      <el-rate v-model="item.score" disabled></el-rate><span>{{item.time}}</span>
      <hr>
      <p>{{ item.content }}</p>
      <div class="spacebetween">
        <el-tag size="medium">{{item.reply}}回复</el-tag>
        <el-button @click="approve(item)" :class="title==='点赞的评论'?'approve_button':''"><i class="iconfont icon-dianzan"></i>{{item.approve}}</el-button>
      </div>
    </div>

  </el-card>
</div>
</template>

<script>
import Header from "../../../components/Header";
import {mapState} from "vuex";
export default {
  name: "Com",
  components: {Header},
  data(){
    return{
      title:this.$route.params.title,
      OldCom:[],
      MyCom:[],
    }
 },
  created() {
    if(sessionStorage.getItem('OldCom')){
      this.OldCom=JSON.parse(sessionStorage.getItem('OldCom'))
    }else {
      this.OldCom=[]
    }

    this.title==="我的评论"?this.MyCom=this.MovCommentByUser:this.MyCom=this.OldCom
  },
  computed:{...mapState({
      MovCommentByUser:state=>state.movie.MovCommentByUser,
    })},
  beforeCreate() {
    this.$store.dispatch('movie/movLocalComByUser',
      window.localStorage.getItem('id'))
  },
  methods:{
    approve(item){
      this.$store.dispatch('movie/movAddComment',item)
      // this.$store.dispatch('movie/OldCom',item)
      item.approve=item.approve+1
      // item.approve=item.approve+1
    }
  }
}
</script>

<style scoped>
.approve_button{
  background: #b3d4fc;
}
.el-card{
  margin-top: 20px;
}
.el-avatar{
  position: absolute;
}
hr{
  width: 100%;
  color: #cccccc;
}
.userinfo{
  width: 90%;
  display: inline-block;
  margin: 0 70px;
}
.userinfo span{
  margin-left: 10px;
  color: #cccccc;
}
.el-tag {
  margin-top: 10px;
  font-size: 10px;
}
.userinfo .el-rate{
  display: inline-block;
}
.el-button:focus, .el-button:hover {
  color: black;
  border-color: #c6e2ff;
  background-color: #4d97e3;}
</style>
